<template>
  <div class="card-content">
    <div class="title">会员卡列表</div>
    <div class="card-search">
      <div class="left">
        <div class="input">
          <el-input placeholder="请输入会员卡名称" v-model="searchCondition.memberName"/>
        </div>
        <div class="input">
          <el-date-picker v-model="searchCondition.dateRange" type="daterange" start-placeholder="创建开始" end-placeholder="创建结束"/>
        </div>
        <div class="input">
          <el-select v-model="searchCondition.cardType" placeholder="请选择卡等级">
            <el-option v-for="item in cardTypes" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </div>
      </div>
      <div class="right">
        <div class="btn primary">查询</div>
        <div class="btn plain" @click="editCard({})">
          <i class="el-icon-plus"></i>
          <span>新增</span>
        </div>
        <div class="btn plain" @click="cardSetting">
          <i class="el-icon-coin"></i>
          <span>积分设置</span>
        </div>
      </div>
    </div>
    <div class="card-list">
      <div>
        <el-table :data="cardList.data" style="width: 100%">
          <el-table-column type="index" label="序号"/>
          <el-table-column prop="rank" label="等级"/>
          <el-table-column prop="name" label="会员卡名称"/>
          <el-table-column prop="amount" label="最低消费金额"/>
          <el-table-column prop="num" label="会员数量"/>
          <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true"/>
          <el-table-column label="状态">
            <template slot-scope="item">
              <div>{{ item.row.status == 'valid' ? '有效' : '无效' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="item">
              <span @click="editCard(item.row)" class="edit">编辑</span>
              <span @click="enableCard(item.row)" class="disable-able">{{ item.row.status == 'valid' ? '禁用' : '启用' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="cardList.data.length > 0" class="pager">
        <el-pagination background
                       layout="sizes,prev,pager,next,jumper,->,slot"
                       @current-change="handlePageChange"
                       @next-click="handlePageChange"
                       @prev-click="handlePageChange"
                       :current-page="queryTerms.pageNo"
                       :page-size="queryTerms.pageSize"
                       :total="cardList.count">
        </el-pagination>
      </div>
    </div>
    <edit-card ref="editCard" :cardInfo="cardInfo"/>
    <card-setting ref="cardSetting"/>
  </div>
</template>

<script>
import EditCard from './dialog/editCard'
import CardSetting from './dialog/cardSetting'

export default {
  name: 'card',
  components: { CardSetting, EditCard },
  data () {
    return {
      cardInfo: {},
      searchCondition: {
        memberName: '',
        dateRange: '',
        cardType: ''
      },
      cardTypes: [
        { value: 'guibing', label: '贵宾' },
        { value: 'normal', label: '普通' }
      ],
      cardList: { data: [], count: 0 },
      queryTerms: {
        pageNo: 1,
        pageSize: 5
      }
    }
  },
  created () {
    for (let i = 1; i < 10; i++) {
      const status = i % 3 === 0 ? 'valid' : 'invalid'
      this.cardList.data.push(
        { rank: 'V' + i, name: '金卡', amount: 30 + i, num: 10 + i, createTime: '2021-01-23 08:00:00', status: status }
      )
    }
    this.cardList.count = this.cardList.data.length
  },
  methods: {
    handlePageChange (val) {
      this.queryTerms.pageNo = val
      this.getCardList()
    },
    getCardList () {

    },
    editCard (row) {
      console.log(row)
      this.cardInfo = row
      this.$refs.editCard.show()
    },
    enableCard (item) {
      const alertTitle = item.status === 'valid' ? '禁用此卡，请谨慎操作！' : '您要启用此卡？'
      const alertMessage = item.status === 'valid' ? '提醒，：禁用后，卡为失效状态，将不可使用。' : '提醒：启用后，卡为有效状态，即可使用。'
      const completeMessage = item.status === 'valid' ? '禁用成功！' : '启用成功！'
      this.$confirm(alertMessage, alertTitle, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        item.status = item.status === 'valid' ? 'invalid' : 'valid'
        this.$message({
          type: 'success',
          message: completeMessage
        })
      })
    },
    cardSetting () {
      this.$refs.cardSetting.show()
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.card-content {
  flex-grow: 1;
  .title {
    padding: 20px 30px;
    background: #FFFFFF;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
  .card-search {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin: 20px;
    background: #FFFFFF;
    .left {
      display: flex;
      align-items: center;
      .input {
        margin-left: 20px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .btn {
        width: 88px;
        height: 39px;
        text-align: center;
        line-height: 39px;
        margin-left: 20px;
        font-size: 14px;
        cursor: pointer;
        border-radius: 3px;
      }
      .primary {
        background: $mainBg;
        color: #FFFFFF;
      }
      .plain {
        background: #FFFFFF;
        border: 1px solid $mainBg;
        color: $mainBg;
      }
    }
  }
  .card-list {
    background: #FFFFFF;
    padding: 20px;
    margin: 20px;
    .disable-able,.edit{
      color: $mainBg;
      cursor: pointer
    }
    .disable-able{
      margin-left: 5px;
    }
    .pager {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
